<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>layui</title>
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<link rel="stylesheet" href="../css/layui.css" media="all">
		<!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
	</head>
	<style>
		[v-clock] {
			display: none;
		}
	</style>

	<body>
		<!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
		<!--[if lt IE 9]>
  <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
  <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
		<div id="app" v-cloak="">
			<div class="layui-container">

				<div class="layui-row">

					<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
						<legend>预习资料</legend>

					</fieldset>
					<!--<div class="layui-col-md-offset9">

						<div class="layui-form-item">

							<div class="layui-input-inline">
								<input type="text" id="searchbtn" name="" lay-verify="required" placeholder="课程名回车搜索" autocomplete="off" class="layui-input">
							</div>
						</div>

					</div>-->
					<div class="layui-collapse" lay-accordion="">

						<!------------------------------------------------------------------------------------->
						<template v-for="pd in preDate">
							<div class="layui-colla-item">
								<h2 class="layui-colla-title">{{pd.couName}}&nbsp;&nbsp;{{pd.expName}}</h2>
								<!--layui-show-->
								<div class="layui-colla-content" v-if="pd.materialList != ''">
									<div class="layui-form">
										<table class="layui-table" style="text-align: center;">
											<colgroup>
												<col width="150">
												<col width="150">
												<col width="200">
												<col>
											</colgroup>
											<thead>
												<tr>
													<th style="text-align: center;">文件名</th>
													<th style="text-align: center;">上传时间</th>
													<th style="text-align: center;">备注</th>

												</tr>
											</thead>

											<tbody>
												<template v-for="mat in  pd.materialList">
													<tr>
														<td>
															<a @click="downOne(mat)" style="cursor:pointer" title="点击下载"> {{mat.oldName}}</a>
														</td>
														<td>{{mat.upTime}}</td>
														<td>{{mat.remark}}</td>
													</tr>
												</template>

											</tbody>
										</table>
									</div>
									<div class="layui-col-md-offset5">

										<button class="layui-btn layui-btn-radius" @click="downAll(pd.materialList)">全部下载</button>

									</div>
								</div>
							</div>
						</template>
						<!---------------------------------------------------------->

					</div>
					<!-- 分页使用  插件进行-->
					<div class="layui-col-md-offset2" style="margin-top: 50px;">

						<div id="demo7"></div>
					</div>

				</div>

			</div>
		</div>
		<script src="../layui.js" charset="utf-8"></script>
		<script type="text/javascript" src="../js/jquery.min.js"></script>
		<script type="text/javascript" src="../js/vue.min.js"></script>
		<script type="text/javascript" src="../js/jquery.cookie.js"></script>
		<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
		<script>
			$(function() {

				$(document).bind("contextmenu", function(e) {
					return false;
				});

				var preDate; //储存界面显示内容
				var aa = 0;

				$.ajax({
					type: "get",
					url: "http://localhost:8080/student/predate/preDate.do",
					async: false,
					dataType: "json",
					data: {
						sid: $.cookie("sid")
					},
					success: function(data) {
						if(data.info == '404') {
							window.location.href = "../student/stulogin.html"
						} else {
							preDate = data;
							console.log(preDate);
							//alert("ok" + preDate);
							for(var ever in data) {
								aa++;
							}
						}

					},
					error: function(data) {
						preDate = data;
					}
				});

				var pageCount = aa;
				console.log(pageCount);
				//分页显示数量，正好是一页6个  没有下拉框
				var pageSize = 7;

				layui.use(['laypage', 'layer'], function() {
					var laypage = layui.laypage,
						layer = layui.layer;

					//完整功能
					laypage.render({
						elem: 'demo7',
						count: pageCount,
						limit: pageSize,
						layout: ['count', 'prev', 'page', 'next'],
						jump: function(obj) {
							//console.log(obj);
							//alert(obj.curr);

							$.ajax({
								type: "post",
								url: "http://localhost:8080/student/predate/getpd.do",
								async: false,
								dataType: "json",
								data: {
									pageNo: obj.curr,
									limit: pageSize,
									sid: $.cookie("sid")
								},
								success: function(data) {
									if(data.info == '404') {
										window.location.href = "../student/stulogin.html"
									} else {
										preDate = data;
										vue.preDate = preDate;
										console.log(preDate);
									}
								},
								error: function(data) {
									//preDate = data;
								}
							});

						}
					});
				});

				//console.log("外层");
				//console.log(preDate);

				/**
				 * 虚拟表单，用于下载文件使用
				 * @param verb 'POST' or 'GET'
				 * @param urls 资源文件地址
				 * @param datas 向后台传递的json参数
				 * @param target '_blank' or '_self' 是否在空白页面打开
				 */
				function openNewPost(verb, urls, datas, target) {
					//alert("okkkk9");
					var form = document.createElement("form");
					form.action = urls;
					form.method = verb;
					form.target = target || "_self";
					if(datas) {
						for(var key in datas) {
							var input = document.createElement("textarea");
							input.name = key;
							//alert("name: " + input.name);
							input.value = typeof datas[key] === "object" ? JSON
								.stringify(datas[key]) : datas[key];
							//alert("value:" + input.value);
							form.appendChild(input);
						}
					}
					form.style.display = 'none';
					document.body.appendChild(form);
					form.submit();
					document.body.removeChild(form);
				}

				var vue = new Vue({
					el: "#app",
					data: {
						preDate: preDate

					},
					methods: {
						downOne: function(data) {
							console.log(data);

							var verb = "post";
							var urls = "http://localhost:8080/student/predate/downOne.do?sid=" + $.cookie("sid");
							var datas = data;
							var target = "_self";

							openNewPost(verb, urls, datas, target);

						},
						downAll: function(data) {

							var list = new Array(); //存放地址
							var oldname = new Array(); //存放原名字
							for(var i = 0; i < data.length; i++) {
								list[i] = data[i].matUrl;
								oldname[i] = data[i].oldName;
							}

							//将 上面两个数据封装成json  传到后台
							var a = {
								"url": list,
								"oldname": oldname
							};

							//console.log(a);

							var verb = "post";
							var urls = "http://localhost:8080/student/predate/downAll.do?sid=" + $.cookie("sid");
							var datas = a;
							var target = "_self";
							openNewPost(verb, urls, datas, target);

						},

					}
				})

			})

			//折叠页的展开  
			layui.use(['element', 'layer'], function() {
				//alert("11111");
				var element = layui.element;
				var layer = layui.layer;

				//监听折叠
				/*element.on('collapse(test)', function(data) {
					alert("22222");
					layer.msg('展开状态：' + data.show);
				});*/
			});

			/*var pageCount = 100;
			//完整功能
			layui.use(['laypage', 'layer'], function() {
				var laypage = layui.laypage,
					layer = layui.layer;

				//layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip'],
				//完整功能
				laypage.render({
					elem: 'demo7',
					count: pageCount,
					limit: 1,
					layout: ['count', 'prev', 'page', 'next'],
					jump: function(obj) {
						console.log(obj);
						alert(obj.curr);
					}
				});

			});*/

			//回车触发搜索框
			$(function() {
				$("#searchbtn").keydown(function(event) {
					if(event.keyCode == 13) {
						//执行操作
						alert($("#searchbtn").val());
					}
				})
			});
		</script>

	</body>

</html>